import { defineConfig } from "vitepress";
import zh from "./zh";
import en from "./en";
import { tabsMarkdownPlugin } from "vitepress-plugin-tabs";
import tailwindcss from "@tailwindcss/vite";
import "medium-zoom"

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "Hello E3",
  description: "Hello E3",
  rewrites: {
    "zh/:rest*": ":rest*",
  },
  vite: {
    plugins: [tailwindcss()],
  },
  // base: "/guide",
  locales: {
    root: {
      label: "简体中文",
      ...zh,
    },
    en: {
      label: "English",
      ...en,
    },
  },
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin);
      md.use(lightbox, {});
    },
    image: {
      lazyLoading: true
    }
  },
  cleanUrls: true,
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    search: {
      provider: "local",
    },

    socialLinks: [
      { icon: "github", link: "https://github.com/KaivnD/hello-e3" },
    ],
    outline: [2, 4],
  },
  head: [
    // [
    //   "script",
    //   {
    //     src: "https://registry.npmmirror.com/@tailwindcss/browser/4.1.11/files/dist/index.global.js",
    //   },
    // ],
    [
      "link",
      {
        href: "https://registry.npmmirror.com/font-awesome/4.7.0/files/css/font-awesome.min.css",
        rel: "stylesheet",
      },
    ],
  ],
});

function lightbox(md) {
  // Store the original image renderer
  const defaultImageRenderer = md.renderer.rules.image;

  // Customize the image renderer.
  md.renderer.rules.image = (tokens, idx, options, env, self) => {
    // Add data-zoomable attribute to the images
    tokens[idx].attrSet("data-zoomable", true);

    return defaultImageRenderer(tokens, idx, options, env, self);
  };
}
